<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      :mode="mode"
      @select="handleSelect"
      :background-color="backgroundColor"
      :text-color="textColor"
      :active-text-color="activeTextColor"
      :collapse-transition="true"
      :collapse="isCollapse"
  >

    <el-menu-item index="bigData">
      <i style="margin-right: 24px" class="el-icon-data-line"></i>
      <span slot="title" class="itemtitle">大数据分析</span>
    </el-menu-item>

    <el-menu-item index="broad">
      <i style="margin-right: 24px" class="el-icon-microphone"></i>
      <span slot="title">黑广播查询</span>
    </el-menu-item>

    <el-menu-item index="work">
      <i style="margin-right: 24px" class="el-icon-s-order"></i>
      <span slot="title">工作管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
/**
 * 导航栏
 */
export default {
  data() {
    return {
      activeIndex: '1', //当前激活菜单
      isCollapse: false //是否折叠
    };
  },
  props: {
    mode: {
      type: String,
      default: "horizontal"
    },
    backgroundColor: {
      type: String,
      default: "rgb(255, 255, 255)"
    },
    textColor: {
      type: String,
      default: "rgb(90, 84, 84)"
    },
    activeTextColor: {
      type: String,
      default: "rgb(109, 97, 234)"
    },
    collapseFLag: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    collapseFLag: function () {
      this.isCollapse = !this.isCollapse
    }
  },
  methods: {
    handleSelect(key) {
      this.$router.push({name: key});
      this.$emit("menuChange", key)
    }
  }
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-item {
  text-align: left;
  font-size: 15px;
}

.el-menu-item:hover {
  transform: translate(5px)
}
</style>